<template>
  <!-- 顶部 -->
  <div class="AddGoods">
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
          <template #title>
            <div class="banner-title" style="font-size: 20px;">添加商品</div>
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <!-- 计划 -->
      <div class="plan panel">
        <div class="panel-title">
          <div class="panel-title-icon"></div>计划
        </div>
        <!-- 预购日期 -->
        <div class="task-main">
          <div class="task-info">
            <div class="task-icon">
              <van-icon name="play-circle-o" size="30" color="gray" />
            </div>
            <div class="task-text">
              <div class="task-title">预购日期</div>
              <div class="task-tag">👀可以设置一个购物日期哦~</div>
            </div>
          </div>
          <div class="task-right">
            <van-icon name="arrow" />
          </div>
        </div>
        <!-- 优先级 -->
        <div class="task-main">
          <div class="task-info">
            <div class="task-icon">
              <van-icon name="list-switch" size="30" color="gray" />
            </div>
            <div class="task-text">
              <div class="task-title">优先级</div>
              <div class="task-tag">{{ rateText }}</div>
            </div>
          </div>
          <div class="task-right">
            <van-rate :size="25" v-model="rateVal" void-icon="star" color="#ffd21e" void-color="#eee" />
          </div>
        </div>
      </div>
      <!-- 商品 -->
      <div class="goods panel">
        <div class="panel-title">
          <div class="panel-title-icon"></div>商品
        </div>
        <!-- 商品信息设置 -->
        <div class="goodsInfo">
          <!-- 分类 -->
          <div class="input-box">
            <div class="input-title">分类</div>
            <div class="input">
              <van-cell-group inset class="group">
                <van-field v-model="categoryVal" placeholder="请输入分类" type="text" readonly
                  @click="mainCategoryListShow = true; onFocusInput = 0">
                  <template #extra>
                    <div class="category-icon">
                      <van-image v-if="onFocusInput != 0" :src="img_01" height="26" width="26"></van-image>
                      <van-image v-if="onFocusInput == 0" :src="img_02" height="26" width="26"></van-image>
                    </div>
                  </template>
                </van-field>
              </van-cell-group>
            </div>
          </div>
          <!-- 商品名称 -->
          <div class="input-box">
            <div class="input-title offset">商品名称</div>
            <div class="input">
              <van-cell-group inset class="group">
                <van-field v-model="goodsName" placeholder="商品名称" maxlength="10" type="text" clearable
                  clear-trigger="always" v-on:focus="onFocus(1)" v-on:blur="onBlur()">
                  <template #left-icon>
                    <van-icon :class="onFocusInput == 1 ? 'icon-focus' : ''" name="edit" color="gray" size="26" />
                  </template>
                </van-field>
              </van-cell-group>
            </div>
          </div>
          <!-- 预算金额 -->
          <div class="input-box">
            <div class="input-title offset">商品金额</div>
            <div class="input">
              <van-cell-group inset class="group">
                <van-field v-model="goodsMoney" placeholder="商品金额" maxlength="8" type="number" clearable :formatter
                  format-trigger="onBlur" clear-trigger="always" v-on:focus="goodsMoneyFocus" v-on:blur="onBlur()"
                  ref="moneyInput">
                  <template #left-icon>
                    <van-icon :class="onFocusInput == 2 ? 'icon-focus' : ''" name="balance-o" color="gray" size="26" />
                  </template></van-field>
              </van-cell-group>
            </div>
          </div>
          <!-- 商品数量 -->
          <div class="input-box task-main">
            <div class="task-info">
              <div class="task-icon">
                <van-image :src="img_03" height="26" width="26"></van-image>
              </div>
              <div class="task-text">
                <div class="task-title">商品数量</div>
                <div class="task-tag">预估总价：{{ goodsTotalMoney }}</div>
              </div>
            </div>
            <div class="task-right">
              <van-stepper v-model="goodsNumber" max="999" />
            </div>
          </div>
          <!-- 备注 -->
          <div class="input-box">
            <div class="input-title offset">备注</div>
            <div class="input">
              <van-cell-group inset class="group">
                <van-field v-model="goodNotes" placeholder="备注" maxlength="50" type="text" clearable
                  clear-trigger="always" v-on:focus="onFocus(3)" v-on:blur="onBlur()">
                  <template #left-icon>
                    <van-icon :class="onFocusInput == 3 ? 'icon-focus' : ''" name="orders-o" color="gray" size="26" />
                  </template>
                </van-field>
              </van-cell-group>
            </div>
          </div>
        </div>
        <!-- 主分类列表 -->
        <van-popup v-model:show="mainCategoryListShow" position="bottom">
          <div class="setting-popup">
            <div class="budget-box">
              <div class="budgetCategory-list">
                <div class="budgetCategory-item budgetCategory---item" v-for="(mcCategory, index) in categoryListA"
                  :key="mcCategory.id" @click="changeCategory(mcCategory)">
                  <div class="category-icon">
                    <van-image :src="mcCategory.icon"></van-image>
                  </div>
                  <div class="category-text">{{ mcCategory.text }}</div>
                </div>
              </div>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="main-b">
      <div class="fixedBtn" @click="addGoods()">保存</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="AddGoods">
// 购物清单添加商品
import { ref, reactive, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import useCategory from '@/hooks/useCategory'
import type { Category } from '@/hooks/useCategory'
import img_01 from '@/icon/067_分类.svg'
import img_02 from '@/icon/067_分类-获得焦点.svg'
import img_03 from '@/icon/067_井号.svg'


const router = useRouter()
let { categoryListA } = useCategory()

// 返回上一页
function back() {
  router.go(-1)
}

// 添加商品
function addGoods() {
  console.log('添加商品')
}

// 优先级
let rateVal = ref(0)
// 优先级文字
let rateText = computed(() => {
  switch (rateVal.value) {
    case 0:
    case 1:
      return "气定神闲"
    case 2:
      return "不疾不徐"
    case 3:
      return "事不宜迟"
    case 4:
      return "迫在眉睫"
    case 5:
      return "十万火急"
  }
})

// 分类
let categoryVal = ref("")
// 分类列表
let mainCategoryListShow = ref(false)
// 选择分类
function changeCategory(category: Category) {
  mainCategoryListShow.value = false // 选中类别后关闭列表
  onFocusInput.value = -1 // 将焦点置-1
  categoryVal.value = category.text // 设置分类预算名称
  console.log(category)
}

// 商品名称
let goodsName = ref("")

// 商品金额
let goodsMoney = ref(0) // 商品金额
const formatter = (value: string) => parseFloat(value).toFixed(2) // 格式化

const moneyInput: any = ref(null)
// 获得焦点时全选内容
function goodsMoneyFocus() {
  onFocus(2)
  if (moneyInput.value) {
    const inputElement = moneyInput.value.$el.querySelector('input')
    if (inputElement) {
      inputElement.select()
    }
  }
}

// 商品数量
let goodsNumber = ref(0)

// 商品总值
let goodsTotalMoney = computed(() => {
  return (goodsMoney.value * goodsNumber.value).toFixed(2)
})

// 备注
let goodNotes = ref("")


// 当前获得焦点的输入框
let onFocusInput = ref(-1)
// 得到焦点
function onFocus(index: number) {
  onFocusInput.value = index
  console.log(onFocusInput.value)
}
// 失去焦点
function onBlur() {
  onFocusInput.value = -1
  console.log(onFocusInput.value)
}

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);
@grayBgColor: rgb(240, 240, 240);

.AddGoods {
  position: relative;
  height: 100vh;
  width: 100%;
}

.van-cell-group--inset {
  margin: 0 !important;
}

.panel-title {
  display: flex;
  align-items: center;
}

.icon-focus {
  color: @gabelBgColor !important;
}

.main-c {
  font-size: 33px;
  margin: @gabelMargin;

  .task-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .task-info {
      display: flex;
      align-items: center;

      .task-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: @grayBgColor;
      }

      .task-text {
        .task-tag {
          font-size: 25px;
          color: gray;
        }
      }
    }

    .task-right {
      display: flex;
      align-items: center;
      color: gray;

      .task-right-text {
        font-size: 25px;
      }
    }
  }

  .goods {
    .goodsInfo {
      .input-box {
        position: relative;
        margin: 40px 20px;

        .input-title {
          position: absolute;
          z-index: 1;
          font-size: 30px;
          top: -22px;
          left: 60px;
          color: @garyFontColor;
        }

        .input-title.offset {
          margin-left: 46px;
        }

        .input {
          width: 100%;
          display: flex;
          margin-top: 30px;

          .group {
            width: 100%;
            border-radius: 100px;
          }

          .van-cell {
            align-items: center;
            background-color: rgb(241, 241, 241);
          }

          .category-icon {
            display: flex;
            align-items: center;
          }
        }
      }

      .input-box .task-tag {
        width: 350px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .input-box.task-main {
        .task-icon {
          margin-left: 0px;
        }
      }

      .tag {
        font-size: 25px;
        margin: 10px 30px;
        color: @garyFontColor;
      }

      .saveBtn {
        margin-bottom: 120px;
      }

      .Category-list {
        height: 50vh;
        overflow: scroll;

        .Category-item {
          margin: 25px 0;
          padding: 25px 0;
          display: flex;
          align-items: center;

          .category-icon {
            margin-right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            padding: 15px;
            background-color: @grayBgColor;
          }
        }

        .Category---item {
          border-bottom: 1px solid rgb(210, 210, 210);
        }

        .Category---item:last-child {
          border: none;
        }
      }
    }
  }
}

.setting-popup {
  padding: 20px;
  font-size: 35px;

  .title {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
  }
}

.setting-popup {
  padding: 20px;
  font-size: 35px;

  .title {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
  }

  .budget-box {
    .budget-input-box {
      position: relative;

      .input-title {
        position: absolute;
        z-index: 1;
        font-size: 30px;
        top: -22px;
        left: 60px;
        color: @garyFontColor;
      }

      .budget-input {
        width: 100%;
        display: flex;
        margin-top: 30px;

        .group {
          width: 100%;
          border-radius: 100px;
        }

        .van-cell {
          align-items: center;
          background-color: rgb(241, 241, 241);
        }

        .category-icon {
          display: flex;
          align-items: center;
        }
      }
    }

    .budget-tag {
      font-size: 25px;
      margin: 10px 30px;
      color: @garyFontColor;
    }

    .budget-saveBtn {
      margin-bottom: 120px;
    }

    .budgetCategory-list {
      height: 50vh;
      overflow: scroll;

      .budgetCategory-item {
        margin: 25px 0;
        padding: 25px 0;
        display: flex;
        align-items: center;

        .category-icon {
          margin-right: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          padding: 15px;
          background-color: @grayBgColor;
        }
      }

      .budgetCategory---item {
        border-bottom: 1px solid rgb(210, 210, 210);
      }

      .budgetCategory---item:last-child {
        border: none;
      }
    }
  }

}
</style>